<template>
<div class="tasks">
  <v-nav :path="path" :title="title"></v-nav>
    <!-- <v-tab name="all-tasks" title="所有任务" status="active" 
     distance="55" v-pull-to-refresh="refreshAll"> -->
      <!-- <v-layer></v-layer> -->
      <div style="height:2.5rem"></div>
      <div class="all-tasks">
        <!-- <div class="logo" v-for="val in agenPagetList" v-link="{path:'/user/pay/'+1+'/'+val.id+'/'+val.user_id}" style="color:#A79C8D"> -->
        <div class="logo" v-for="val in agenPagetList" @click="goToPay(val.userid,2,val.money)" style="color:#A79C8D">
          <div class="logo_img">
              <img v-bind:src="val.headimg" class="img-responsive" style="border:solid 1px #fff;border-radius: 50px;overflow:hidden;" width="64" height="64">
              <div style="color:white;line-height: 1;width:90px">{{val.name}}</div>
          </div>
          <div class="logo_id">
              <span class="yue">ID:</span>
            <span class="yue">{{val.userid}}</span>
            </div>
             <div class="logo_leixing">
              <span class="yue">邀请码:</span>
              <span class="yue">{{val.invite_code}}</span>
            </div> 
            
            
            <div class="logo_invite">
              <span class="yue">房卡数量:</span>
              <span class="yue">{{val.gems}}</span>
            </div>

             <div class="logo_balance" v-if="val.money!=null">
              <span class="yue">可提现金额:</span>
            <span class="yue">{{val.money}} 元</span>
            </div> 
        </div>
      </div>
    <nav class="text-center">
      <ul class="pagination pagination-sm">
          <li @click="getAgenPagetList()" v-if="this.p_id != 1" class="{{predisabled}}" aria-disabled="true"><a v-link="{path:'/user/tasks/'+(p_id-1)}">上一页</a></li>
          <li v-else class="disabled"><a>上一页</a></li>
          <li @click="getAgenPagetList()" v-for="val in page" class="{{classActive($index+1)}}" ><a   v-if="($index+1)>=this.p_id-3&&($index+1)<=this.p_id+3" v-link="{path:'/user/tasks/'+($index+1)}">{{$index+1}}</a></li>
          <li @click="getAgenPagetList()" v-if="this.p_id != this.page" class="{{nextdisabled}}"><a  v-link="{path:'/user/tasks/'+(p_id+1)}">下一页</a></li>
          <li v-else class="disabled"><a>下一页</a></li>
      </ul>
    </nav>
  </div>
</template>

<script>
import $ from 'zepto'
import VNav from '../../components/Nav'
import _global from '../global'

export default {
  route: {
    data ({from, next}) {
      if (from.path === '/user') {
        this.path = from.path
      }
    }
  },
  ready () {
    if (window.localStorage.getItem('user_id')) {
      self.userId = window.localStorage.getItem('user_id')
    }
    if (self.userId === 0) {
      return
    }
    $.init()
    this.getAgenPagetList()
  },
  data () {
    return {
      path: '/home',
      title: '代理管理',
      total: 0,
      agenPagetList: {},
      page: 1,  // 总页数
      p_id: 1,  // 当前页
      pageSize: 6,  // 每页显示数量
      predisabled: '',
      active: 'active',
      nextdisabled: '',
      userId: 0,
      id: 0
    }
  },
  computed: {
    length () {
      return this.tasks.length
    }
  },
  methods: {
    goToPay (userid, roleid,money) {

      if(!money){
        money=0;
      }
      window.localStorage.setItem('role_id2', roleid)
      this.$router.go('/user/pay/' + 1 + '/' + userid+'/'+money)
    },
    getAgenPagetList () {
      let self = this
      if (window.localStorage.getItem('user_id')) {
        self.userId = parseInt(window.localStorage.getItem('user_id'), 0)
        self.id = parseInt(window.localStorage.getItem('id'), 0)
        self.roleId = parseInt(window.localStorage.getItem('role_id'), 0)
      }
      // if (self.userId === 0) {
      //   location.reload()
      //   this.$router.go('/')
      //   return
      // }
      this.p_id = parseInt(this.$route.params.p_id, 0) || 1
      this.$http.get(_global.url + '/getAgenPagetList?userId=' + self.userId + '&id=' + self.id+ '&role_id=' + self.roleId + '&start=' + (self.p_id - 1) * self.pageSize + '&limit=' + self.pageSize).then(function(res) {
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        if (res.data.errcode === -999) {
          // this.$router.go('/')
          window.location.href = _global.url + '/wxlogin'
          return
        }
        self.agenPagetList = res.data.data
        self.total = res.data.pageCount
        self.page = Math.ceil(self.total / self.pageSize)
        // console.log('agenPagetList', res.data)
      }, function(res) {
        console.log(res)
      })
    },
    classActive (index) {
      if (index === this.p_id) {
        return 'active'
      }
      return ''
    }
  },
  components: {
    VNav
  }
}
</script>

<style>
.tasks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.tasks-tabs .buttons-tab {
  z-index: 10;
  margin-top:2.2rem;
}
#all-tasks, #my-tasks {
  top: 2rem;
}
.all-tasks .logo {
  background-color: #A79C8D;
  border-radius: 10px;
  width: 95%;
  margin: auto;
  height: 80px;
  padding: 20.2666654px 21.333332px 5.333333px;
  box-shadow: 0 .0rem .8rem rgba(0,0,0,.3);
  margin-bottom: 0.2rem;
  position: relative;
}
.all-tasks .logo .logo_img {
  margin-top: -16px;
  width: 58.666663px;
  height: 58.666663px;
  display: inline-block;
}
.all-tasks .logo .logo_txt {
  margin-top: 7px;
  float: right;
  text-align: right;
}
.all-tasks .logo .logo_txt .yue {
  color: #ffffff;
  font-size: 15.999999px;
}
.all-tasks .logo .logo_txt .amount {
  display: block;
  margin-top: -6px;
  color: #ffffff;
  font-size: 45.8666638px;
}
.all-tasks .logo .logo_id{
  color:white;
  width:10rem;
  position: absolute;;
  display:block;
  top:0.2rem;
  left:6rem;
  font-size:15.999999px;
}
.all-tasks .logo .logo_leixing{
  color:white;
  width:10rem;
  position: absolute;;
  display:block;
  top:1.1rem;
  left:6rem;
  font-size:15.999999px;
}
.all-tasks .logo .logo_invite{
  color:white;
  width:10rem;
  position: absolute;;
  display:block;
  top:2rem;
  left:6rem;
  font-size:15.999999px;
}

.all-tasks .logo .logo_balance{
  color:white;
  width:10rem;
  position: absolute;;
  display:block;
  top:2.8rem;
  left:6rem;
  font-size:15.999999px;
}
.all-tasks .logo .logo_faka{
  color:white;
  width:10rem;
  position: absolute;;
  display:block;
  top:2rem;
  left:12rem;
  font-size:15.999999px;
}
</style>
